<template>
    <div>
      <h2>查询-->>歌曲信息</h2>
      <table>
        <tr>
          <td>歌名:</td>
          <td><el-input v-model="singName" placeholder="请输入内容" clearable></el-input> </td>
          <td>歌手:</td>
          <td><el-input v-model="singer" placeholder="请输入内容" clearable></el-input> </td>
        </tr>
      </table>
      <el-button @click="find()">搜索</el-button>

      <h1>查询结果</h1>
      <table>
        <thead>
        <tr>
          <th>歌名</th>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <th>歌手</th>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <th>专辑</th>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <th>类型</th>
        </tr>
        </thead>

        <tbody>
        <tr v-for="(arr,index) in music" :key="index">
          <td>{{arr.singName}}</td>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <td>{{arr.singer}}</td>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <td>{{arr.singAlbum}}</td>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <td>{{arr.singType}}</td>
        </tr>
        </tbody>
      </table>
    </div>
</template>

<script>
import axios from "axios";
    export default {
        name: "FindSong",
      data(){
          return{
            singName:'',
              singer:'',
              music: []
          }
      },
      methods: {
        find() {
          axios({
            methods: "get",
            url: "http://localhost:3000/find",
            params: {
              singName: this.singName,
              singer: this.singer,
              music: [0]
            }
          }).then(response => {
            this.music.push(response.data[0]);
            alert("搜索成功");
          }).catch((err) => {
            console.log(err);
          })
        }
      }
    }
</script>

<style scoped>

</style>


